<template>
    <div class="register">
        <div class="denglu">
            <div v-if="state.isshow">
                <div class="username">用户名</div>
                <input type="text" id="username" v-model="state.params.name" required>
                <br>
                <div class="username">密码</div>
                <input type="password" id="password" v-model="state.params.pwd" required>
                <br>
                <button type="submit" @click="login">登录</button>
                <button type="submit" v-if="state.isshow" @click="check">去注册</button>


            </div>
            <div v-else>
                <div class="username">用户名</div>
                <input type="text" id="newUsername" v-model="state.params.name" required>
                <br>
                <div class="username">密码</div>
                <input type="password" id="newPassword" v-model="state.params.pwd" required>
                <div class="username">确认密码</div>
                <input type="password" id="newPassword" v-model="state.setpassword" required>
                <br>
                <button type="submit" @click="register">点击注册</button>

                <button type="submit" v-if="!state.isshow" @click="check">去登录</button>

            </div>

        </div>

    </div>
</template>
<script lang="ts" setup>

import http, { getItem } from "@/utils";

import { onMounted, reactive, toRefs } from "vue";
import { checkboxGroupProps } from 'vant';
import router from "@/router";

onMounted(() => {

})
const state: {
    setpassword: string,
    isshow: boolean,
    loginlist: string,
    params: params
} = reactive({
    setpassword: '',
    isshow: true,
    loginlist: '',
    params: {
        name: '',
        pwd: '',
    }
})

interface params {
    name: string;
    pwd: string;
}
//登录
const login = async () => {
    state.loginlist = await http.userlogin(state.params);
    localStorage.setItem('token', state.loginlist)
    
    router.push(
        '/home'
    )
    
}
//注册
const register = async () => {
    if(state.params.pwd !== state.setpassword){
        
        return;
    }
    state.loginlist = await http.useradd(state.params);
    state.isshow = !state.isshow
}
const check = () => {
    state.isshow = !state.isshow
}


</script>
  
<style>
.register {
    background-size: 100% 100%;
    background-image: url(https://img.zcool.cn/community/016d0e5e057a61a80120a895892253.gif);
    width: 100%;
    height: calc(100vh - 250px);
    position: relative;

    .denglu {
        position: absolute;
        top: 45%;
        left: 45%;
    }

}

.denglu {
    position: absolute;
    top: 45%;
    left: 45%;
}

.username {
    color: #fff;
    font-size: 14px;
}
</style>